<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <div class="container">
        <div class="title"><h1>表白墙</h1></div>
        <div class="title"><p>请输入相关信息，点击提交数据就会展示在表格中</p></div>
        <div class="div1"><span>谁：</span><input type="text" class="edit"></div>
        <div class="div1"><span>对谁：</span><input type="text" class="edit"></div>
        <div class="div1"><span>说：</span><input type="text" class="edit"></div>
        <div class="div1"><input type="button" value="提交" class="submit" onclick="Submit()"></div>
    </div>
</body>
<style>
    .container
    {
        width:400px;
        margin:0 auto;/*边缘*/
    }
    .title
    {
        text-align:center;/*文本对齐*/
    }
    p
    {
        color:grey;
    }
    .div1
    {
        display:flex;/*弹性展示*/
        justify-content: center;/*内容对齐*/
        align-items:center;/*对齐项目*/
    }
    .edit
    {
        margin-bottom: 20px;
        width:200px;
        height:30px;
    }
    span
    {
        width: 50px;
        margin-bottom: 20px;
    }
    .submit
    {
        background-color: rgb(255,157,0);
        color: white;
        width: 260px;
        height: 30px;
        border: none;/*不要边框*/
        border-radius: 5px;/*设置圆角 radius是半径的意思*/
    }
    .submit:active/*点击鼠标换样式*/
    {
        background-color: grey;
    }
</style>
<script>
    function Submit()
    {
        let all=document.querySelectorAll('.edit')
        let from=all[0].value;
        let to=all[1].value;
        let what=all[2].value;
        let newnode=document.createElement('div')
        newnode.innerHTML=from+" say "+what+" to "+to;
        newnode.className="div1"
        let father=document.querySelector('.container')
        father.appendChild(newnode)
    }
</script>
</html>